import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import Modal from "../index";
import { useTheme } from "@/contexts/ThemeContext";

interface AlertModalProps {
  visible: boolean;
  onClose: () => void;
  title?: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm?: () => void;
  onCancel?: () => void;
  confirmOnly?: boolean;
}

/**
 * 警告/确认对话框模板
 *
 * 基于 Modal 组件的警告对话框模板，可用于显示消息、确认操作等场景
 */
const AlertModal: React.FC<AlertModalProps> = ({
  visible,
  onClose,
  title,
  message,
  confirmText = "确定",
  cancelText = "取消",
  onConfirm,
  onCancel,
  confirmOnly = false,
}) => {
  const { colors } = useTheme();

  const handleConfirm = () => {
    if (onConfirm) {
      onConfirm();
    }
    onClose();
  };

  const handleCancel = () => {
    if (onCancel) {
      onCancel();
    }
    onClose();
  };

  return (
    <Modal
      visible={visible}
      onClose={onClose}
      closeOnBackdropPress={false}
      position="center"
    >
      <View style={styles.container}>
        {title && (
          <Text style={[styles.title, { color: colors.text.primary }]}>
            {title}
          </Text>
        )}

        <Text style={[styles.message, { color: colors.text.secondary }]}>
          {message}
        </Text>

        <View
          style={[
            styles.buttonContainer,
            confirmOnly ? styles.singleButtonContainer : {},
          ]}
        >
          {!confirmOnly && (
            <TouchableOpacity
              style={[styles.button, { borderColor: colors.border.light }]}
              onPress={handleCancel}
            >
              <Text style={{ color: colors.text.secondary }}>{cancelText}</Text>
            </TouchableOpacity>
          )}

          <TouchableOpacity
            style={[
              styles.button,
              styles.confirmButton,
              { backgroundColor: colors.primary },
            ]}
            onPress={handleConfirm}
          >
            <Text style={{ color: "#FFFFFF" }}>{confirmText}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 12,
    textAlign: "center",
  },
  message: {
    fontSize: 16,
    marginBottom: 24,
    textAlign: "center",
    lineHeight: 22,
  },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  singleButtonContainer: {
    justifyContent: "center",
  },
  button: {
    flex: 1,
    height: 44,
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: 8,
    borderWidth: 1,
  },
  confirmButton: {
    borderWidth: 0,
  },
});

export default AlertModal;
